<template>
  <!-- 项目实施 - 4计划审批 - tab2 -审批记录-->
  <div class="approval-record-content">
    <el-row :gutter="12">
      <el-col :span="24">
        <cust-act-table
          ref="custActTable"
          tableType=""
          :list="tableData"
          :colConfigs="customColumns"
          @changePage="changePage"
          @getSelectedRow="showModal('btnModal')"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          :showIdx="false"
          :showAct="false"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <!-- 点击审批记录列表 -->
    <el-dialog :title="detailModalInfo.title" class="btn-modal" :visible.sync="btnModal" @close="closeModal('btnModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <formModal class="form-modal-dialog-content" :formModalDetail="detailModalInfo" @changeFlowModal="changeFlowModal"></formModal>
    </el-dialog>
    <el-dialog title="流程预测" class="flow-modal" :visible.sync="flowModalState" @close="hideFlowModal" width="500px" style="margin-top:2vh;" :close-on-click-modal="false">
      <content5 ref="content5" tabTitle="流程预测" :info="detailModalInfo.img3"></content5>
    </el-dialog>
  </div>
</template>

<script>
import { tableData4, customColumns4 } from '../../js/staticData';
import formModal from '../../components/rightTabs/formModal';
import content5 from "../../components/rightTabs/content5";
import custActTable from "../../components/custActTable.vue";
export default {
  name: "approvalRecordContent",
  components: {custActTable, formModal, content5}, // 
  data() {
    return {
      customColumns: customColumns4[1],
      tableData: tableData4[1],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      btnModal: false,
      flowModalState: false,
      detailModalInfo: {
        title: "审批记录",
        actIdx: '2',
        formList: [
          {
            title: '',
            modalTitle: 'TAB',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-07-26', span: 6, type: 'datePicker' },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '任务计划-20220825035', span: 6 },
              { l: '经办单位', v: 'XX集团有限公司', span: 24 }
            ]
          }, 
          {
            title: '基本信息',
            modalTitle: 'TAB',
            list: [
              { l: '项目名称', v: '蓝旗机器人造林', type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'} },
              { l: '负责人', v: '朱冠', span: 6 },
              { l: '计划工期', v: '10 天', type: 'textR', span: 4 },
              { l: '', v: '甘特图', span: 2, type: 'noLabelButton' },
              { l: '计划开始', v: '2024-07-16', span: 6 },
              { l: '计划完成', v: '2024-07-26', span: 6 },
              { l: '相关附件', v: '', span: 12, type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'} }
            ],
          },{
            title: '任务计划',
            modalTitle: 'EDIT-TABLE',
            tip: '提示：任务计划审批完成后，WBS页面将限制修改任务，若需修改已审批任务请发起【计划变更】流程。',
            list: [
              {
                btns: ['新建', '多选任务', '删除', '删除全部'],
                tableCol: [
                  { label: '任务名称', prop: 'rwmc', width: 150 },
                  { label: '负责人', prop: 'fzr' },
                  { label: '开始日期', prop: 'ksrq' },
                  { label: '完成日期', prop: 'wcrq' },
                  { label: '工期', prop: 'gq' },
                  { label: '里程碑', prop: 'lcb', slot: 'lcbCheckbox', type: 'checkBox', checked: false, disabled: true },
                  { label: '需提交成果', prop: 'xtjcg' }
                ],
                tableData: [
                  {
                    rwmc: '项目启动',
                    fzr: '朱冠',
                    ksrq: '2024-07-24',
                    wcrq: '2024-07-26',
                    gq: '2',
                    lcb: '',
                    xtjcg: ''
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        ],
        tabList: [
          {
            label: "发起附言",
            value: "0",
            img: require('../../images/icon-tab-rt-1.png'),
            active: require('../../images/icon-tab-rt-active-1.png')
          }, {
            label: "处理意见",
            value: "2",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "全部附件",
            value: "3",
            img: require('../../images/icon-tab-rt-3.png'),
            active: require('../../images/icon-tab-rt-active-3.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        doc: {
          name: `计划审批-{项目名称}-{经办日期}`,
          text: `凌焘(审批)`
        },
        imgs: {
          contentImgTitle: "计划审批",
          img1: require('../../images/plan-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/plan-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '1分',
            dateTime: '2024-08-08 09:17:05',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '审批',
              opinion: '同意',
              handler: '凌焘',
              handleTime: '2024-08-08 09:24:01',
              investTime: '1分'
            }]
          }], // 流程预测
        },
        rTabData: [
          {
            label: '发起附言',
            info: []
          }, {
            label: '处理意见',
            info: [{
              header: {
                num1: '', // 赞数量
                num2: '', // 与我相关数
              },
              list: [{
                circleText: '凌焘',
                name: '凌焘',
                opinion: '同意',
                dateTime: '2024-08-06 15:22:08',
                clickNum: '0'
              },{
                circleText: '朱',
                name: '朱冠',
                opinion: '同意',
                dateTime: '2024-08-06 15:22:18',
                clickNum: '0'
              }]
            }]
          }, {
            label: '全部附件',
            info: [{
              tabs: [
                {l: '全部', v: '0', list: [{ docImg: require('../../images/icon-doc2.png'), title: '计划审批附件1.docx', subTitle: '朱冠  2024-08-05  9K' }, { docImg: require('../../images/icon-doc2.png'), title: '计划审批附件2.docx', subTitle: '朱冠  2024-08-05  12K' }]},
                {l: '标题区', v: '1'},
                {l: '表单区', v: '2', list: [{ docImg: require('../../images/icon-doc2.png'), title: '计划审批附件1.docx', subTitle: '朱冠  2024-08-05  9K' }]},
                {l: '意见区', v: '3', list: [{ docImg: require('../../images/icon-doc2.png'), title: '计划审批附件2.docx', subTitle: '朱冠  2024-08-05  12K' }]}
              ]
            }]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '1分',
              dateTime: '2024-08-08 09:17:05',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '审批',
                opinion: '同意',
                handler: '凌焘',
                handleTime: '2024-08-08 09:24:01',
                investTime: '1分'
              }]
            }]
          }, {
            label: '相关数据',
            info: []
          }
        ]
      }
    };
  },
  beforeCreate() {
    this.$options.components.formModal = require('../../components/rightTabs/formModal').default
    this.$options.components.rightTab = require('../rightTab').default;
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData4[1];
      this.customColumns = customColumns4[1];
    })
  },
  methods: {
    /**
     * @author Wrl
     * 打开流程预测弹窗
     */
    changeFlowModal(e) {
      setTimeout(() => {
        document.querySelector('.v-modal').style.display = "none";
      }, 10)
      this.flowModalState = e;
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      if(this.modalType == 'btnModal') {
        this.btnModal = true;
        this.nextLevelModalState = false;
      } else if(this.modalType == 'third') {
        this.thirdModalState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭流程预测弹窗
     */
    hideFlowModal() {
      this.flowModalState = false;
    },
    /**
     * @author Wrl
     * 点击列表行 - 查看
     */
    getSelectedRow() {
      this.showModal('btnModal')
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'btnModal') {
        this.btnModal = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      } else if(type == 'second') {
        this.nextLevelModalState = false;
      } else if(type == 'third') {
        this.thirdModalState = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>
<style lang="scss" scoped>
  .approval-record-content {
    ::v-deep {
      // .btn-modal .el-dialog__header {
      //   padding-top: 20px;
      // }
      .btn-modal .el-dialog__body {
        max-height: 75vh;
        padding: 5px;
        background: #eeeeee;
      }
      .flow-modal {
        .el-dialog__header {
          padding-top: 20px;
        }
        .el-dialog__body {
          padding: 0 10px 30px;
        }
      }
      .next-level-form-modal .el-dialog__body {
        padding: 0px 20px 20px;
      }
    }
  }
</style>